/*#start general*/
* {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
body {nav-menu-collapse
	font-family: 'Segoe UI';
}
/*#end general*/
/*#start left-aside*/
.left-aside {
	background-color: #5c5e66;
	height: calc(100vh - 40px);
	position: fixed !important;	
	display: block;
	top: 40px;
	left: 0px;
}
	.left-aside > .title {
		display: block;
		padding: 5px 15px;
		color: White;
		font-weight: bold;
		font-size: 16px;
		font-family: 'Segoe UI';
		margin: 10px 0;
		text-align: center;
		border-bottom: 1px solid #b9b9b9;
	}
	.left-aside > ul {		
	}
		.left-aside > ul > li {
		}
			.left-aside > ul > li > .title {				
				color: #f3c31b;
				padding: 5px 5px;
				font-weight: bold;
				font-size: 15px;
				cursor: pointer;		
			}
			.left-aside > ul > li > .title:before {
				content: '';
				background-image: url('../../image/icon/arrow_right.png') ;
				width: 10px;
				height: 10px;
				display: inline-block;
				margin-right: 5px;	
				transition: transform 0.2s;				
				-ms-transform: none; /* IE 9 */
			    -webkit-transform: none; /* Chrome, Safari, Opera */
			    transform: none; /* Standard syntax */
			}
				.left-aside > ul > li > .title.active:before {
					-ms-transform: rotate(90deg); /* IE 9 */
				    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
				    transform: rotate(90deg); /* Standard syntax */
				}
			.left-aside > ul > li > ul {
			}
				.left-aside > ul > li > ul > li {
				}
					.left-aside > ul > li > ul > li > a {
						display: block;
						color: white;
						padding: 0px 20px;	
						line-height: 30px;				
					}															
					.left-aside > ul > li > ul > li > a:hover {
						color: #ffcc1b;
					}
/*#end left-aside*/
/*#start collapse-aside*/
.collapse-aside {
	background-color: #5c5e66;
	display: none;
}
	.collapse-aside > .title {
		display: block;
		padding: 5px 15px;
		color: White;
		font-weight: bold;
		font-size: 16px;
		font-family: 'Segoe UI';		
	}
	.collapse-aside > ul {		
	}
		.collapse-aside > ul > li {
		}
			.collapse-aside > ul > li > .title {				
				color: #f3c31b;
				padding: 5px 5px;
				font-weight: bold;
				font-size: 15px;
				cursor: pointer;		
			}
			.collapse-aside > ul > li > .title:before {
				content: '';
				background-image: url('../../image/icon/arrow_right.png') ;
				width: 10px;
				height: 10px;
				display: inline-block;
				margin-right: 5px;	
				transition: transform 0.2s;				
				-ms-transform: none; /* IE 9 */
			    -webkit-transform: none; /* Chrome, Safari, Opera */
			    transform: none; /* Standard syntax */
			}
				.collapse-aside > ul > li > .title.active:before {
					-ms-transform: rotate(90deg); /* IE 9 */
				    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
				    transform: rotate(90deg); /* Standard syntax */
				}
			.collapse-aside > ul > li > ul {
				display: none;
			}
				.collapse-aside > ul > li > ul > li {
					padding: 5px 20px;					
				}
					.collapse-aside > ul > li > ul > li > a {
						color: white;
					}															
					.collapse-aside > ul > li > ul > li > a:hover {
						color: #ffcc1b;
					}		
/*#end hidden-aside*/
/*#start main*/
main {	
}
	/*#start navigator*/
	nav {		
		padding: 10px 20px;
	}
		nav > ul {
			position: relative;
		}
			nav > ul > li {
				display: inline-block;
			}
			nav > ul > li:not(:last-child):after {
				content: '';
				display: inline-block;
				width: 12px;
				height: 12px;
				background-image: url('../../image/icon/arrow.png');
				opacity: 0.2;
			}
				nav > ul > li > a {		
					color: #1c77e0;			
				}
	/*#end navigator*/
	/*#start content*/
	.content {		
	}
		/*#start title*/
		.content > .main-title {			
			font-size: 17px;
			background-color: #484a50;
			display: inline-block;			
			color: white;
			font-weight: bolder;
			padding: 8px 10px;
			margin-bottom: 10px;		
		}
		/*#end title*/
		/*#start item*/
		.content > ul.item {
			margin: 10px 30px;
			position: relative;
		}
		.content > ul.item .hidden {
			display: none;
		}
			.content > ul.item > li.item-title {
				font-weight: bold;
				border-bottom: 1px solid #808080;				
				font-size: 15px;
				color: #808080;
				position: relative;
				padding: 5px;
			}				
			/*#start item form-group*/
			.content > ul.item > li.form-group {
				margin: 20px 0px;
				padding-left: 20px;
			}
				.content > ul.item > li.form-group > label {
					font-size: 14px;
					font-weight: normal;
				}
				/*style Normal*/
				.content > ul.item > li.form-group.normal {					
				}
				/*style 1*/				
				.content > ul.item > li.form-group.ele-1 > div > a {
					
					color: #1c77e0;
				}
				.content > ul.item > li.form-group.ele-1 > .checkbox {					
				}
					.content > ul.item > li.form-group.ele-1 > .checkbox > label {
						margin: 5px 0px;
					}
				/*style 2*/
				.content > ul.item > li.form-group.ele-2 > div > .connecter {
					text-align: center;
					display: block;
				}
				/*style picture*/
				.content > ul.item > li.form-group.pic-ele {
				}			
			/*#start sub-item*/
			.content > ul.item > li.sub-item {				
				margin-left: 90px;
				margin-top: 20px;
			}
			@media (max-width: 500px) {
				.content > ul.item > li.sub-item {
					margin-left: 30px;
					margin-top: 20px;
				}	
			}
				.content > ul.item > li.sub-item > div.sub-item-title {
					color: #808080;					
				}
				.content > ul.item > li.sub-item > div.line {
				}
					.content > ul.item > li.sub-item > div.line > hr {
						margin-top: 0px !important;
					}
				.content > ul.item > li.sub-item > div.form-group {
					margin: 20px 0px;
					padding-left: 20px;
				}
					.content > ul.item > li.sub-item > div.form-group > label {
						font-size: 14px;
						font-weight: normal;
					}
					.content > ul.item > li.sub-item > div.form-group > div.unit {
						padding: 5px 0 0 0;

					}
				/*style Normal*/
				.content > ul.item > li.sub-item > div.form-group.normal {
				}
				/*style 1*/
				.content > ul.item > li.sub-item > div.form-group.ele-1 {
					margin-top: 0px;
				}
					.content > ul.item > li.sub-item > div.form-group.ele-1 > div.checkbox {
						margin-top: -15px;
					}
						.content > ul.item > li.sub-item > div.form-group.ele-1 > div.checkbox > label {
							margin: 5px;
						}
				/*style 3*/
				.content > ul.item > li.sub-item > div.form-group.ele-3 {
				}
					.content > ul.item > li.sub-item > div.form-group.ele-3 > div > select {						
					}
					@media (max-width: 767px ) {
						.content > ul.item > li.sub-item > div.form-group.ele-3 > div > select {
							margin-bottom: 10px;
						}
					}
					.content > ul.item > li.sub-item > div.form-group.ele-3 > div.unit {
						padding: 5px 0 0 0;
					}
					.content > ul.item > li.sub-item > div.form-group.ele-3 > div.checkbox {						
					}
						.content > ul.item > li.sub-item > div.form-group.ele-3 > div.checkbox > label {
							margin-right: 15px;
						}
				/*style picture*/
				.content > ul.item > li.sub-item > div.form-group.pic-ele {					
				}
					.content > ul.item > li.sub-item > div.form-group.pic-ele > div {
						margin-top: 5px;
					}
			/*#end sub-item*/
		/*#end item form-group*/		
		/*#start submit*/
		.content > ul.item > .submit {
			text-align: center;
			margin: 30px 0;				
		}
		/*#end submit*/
	/*#end content*/
	/*#start guide*/
	.guide {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
		left: -15px !important;
	}
	/*#end guide*/
/*#end main*/

/* #start supporter */
.support-button {
	display: inline-block;
	top: 7px;					
	background: url('../../image/icon/icon_question.png') no-repeat left center;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	position: absolute;						
}
	.support-button:hover {
		background: url('../../image/icon/icon_question.png') no-repeat right center;
	}
		.support-text {
			display: none;
			border: 1px solid #f3c31b;
			box-shadow: 0px 0px 10px #935B13;
			position: absolute;
			width: 100%;
			font-size: 13px;
			font-weight: normal;
			color: #000;
			padding: 10px;
			background-color: white;
			top: 35px;
			z-index: 1;
			margin-left: -5px;
		}
			.support-text > a {
				color: #1c77e0;
			}
.free-supporter {
	color: #ff1919;
	text-align: center;
}
	.free-supporter > a {
		color: #1c77e0;
	}
/*status*/
.is-error {
	border-color: red !important;
	box-shadow: 0 0 12px #FF9999 !important;
}